Skip to content

Conversation

@Github11200
Copy link
Contributor

Follows up on #16652

Description:
The docs for Custom Elements didn't include a reference to the $host rune which caused confusion on how to get a host element into the component code.

The PR as a line added at the bottom of 04-custom-elements.md which simply states that for dispatching custom events or accessing the host element you can use the $host rune.

@changeset-bot
Copy link

changeset-bot bot commented Aug 28, 2025

⚠️ No Changeset found

Latest commit: 8050a05

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@svelte-docs-bot
Copy link

@github-actions
Copy link
Contributor

Playground

pnpm add https://pkg.pr.new/svelte@16686

Copy link
Member

@Ocean-OS Ocean-OS left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good start, but I think it'd be better to reference $host closer to the top of the page so it's easier to find. Its current location doesn't really make much sense, either.

<!-- - [basically what we have today](https://svelte.dev/docs/custom-elements-api) -->

Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options).
Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options). Within the custom element you can also access the host element and do things such as dispatching events using the [\$host](https://svelte.dev/docs/svelte/$host) rune.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options). Within the custom element you can also access the host element and do things such as dispatching events using the [\$host](https://svelte.dev/docs/svelte/$host) rune.
+ Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options). Within the Svelte component, you can access the host element via the [`$host`](https://svelte.dev/docs/svelte/$host) rune. 

might be a bit cleaner, removes "do things" which doesn't sound the best

Copy link
Member

@Rich-Harris Rich-Harris left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks!

@Rich-Harris Rich-Harris merged commit 9d1aa69 into sveltejs:main Aug 30, 2025
1 check was pending
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants